<template>
    <div class="top-nav">
        <el-row>
            <!--                logo-->
            <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <div class="logo">
                    <img @click="$router.push('/')" src="../../assets/logo1.png" alt="芬享">
                </div>
            </el-col>
            <!--                导航栏-->
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-menu
                        :default-active="activeIndex"
                        class=""
                        mode="horizontal"
                        background-color="#fff"
                        active-text-color="#ffc300"
                        text-color="#737373">
                    <el-menu-item index="1">
                        <div>
                            食客
                            <font-awesome-icon :icon="['fas', 'user-alt']"/>
                        </div>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <div>
                            厨师
                            <font-awesome-icon :icon="['fas', 'utensils']"/>
                        </div>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <div>
                            店家
                            <font-awesome-icon :icon="['fas', 'store']"/>
                        </div>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <div>
                            朋友圈
                            <font-awesome-icon :icon="['fas', 'circle-notch']"/>
                        </div>
                    </el-menu-item>
                </el-menu>
            </el-col>

            <!--            搜索-->
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <div class="search-box">
                    <div class="search-input">
                        <el-input @blur="searchBlur" @focus="searchFocus" placeholder="搜索朋友圈、厨师、店铺" v-model="input">
                            <el-button slot="append"
                                       style="background-color: #ffc300;
                                       border-radius: 0;
                                       border: 1px solid #ffc300;
                                       font-weight: 700;
                                       color: #222222"
                                       icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div class="search-content" v-if="isSearch">

                    </div>
                </div>
            </el-col>

            <!--            地区-->
            <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <div class="city">
                    <span><font-awesome-icon :icon="['fas', 'map-marker-alt']"/> {{currentCity.name}}</span>
                    <el-button type="text" class="select-city" @click="$router.push('/changecity')">[更换城市]
                    </el-button>
                </div>
            </el-col>

            <!--            头像-->
            <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <div class="avatar" v-if="isLogin()">
                    <el-popover
                            placement="top"
                            width="200"
                            trigger="click">
                        <div class="top-nav-content">
                            <!--                            用户名-->
                            <div class="username">
                                <span>{{username}}</span>
                            </div>
                            <!--                            等级-->
                            <div class="grade">
                                <span>Lv1
                                    <el-progress color="exp" status="warning" :show-text="false"
                                                 :percentage="50"></el-progress>
                                </span>
                            </div>
                            <!--                            个人中心-->
                            <div class="go-a" @click="$router.push(`/diner/${account}`)">
                                <span>
                                    <font-awesome-icon class="icon" :icon="['fas', 'user']"/>
                                    个人中心
                                </span>
                            </div>
                            <!--                            内容创建-->
                            <div class="go-a" @click="createVisible = true">
                                <span>
                                    <font-awesome-icon class="icon" :icon="['fas', 'edit']"/>
                                    内容创建
                                </span>
                            </div>
                            <!--                            内容管理-->
                            <div class="go-a">
                                <span>
                                    <font-awesome-icon class="icon" :icon="['fas', 'file']"/>
                                    内容管理
                                </span>
                            </div>
                            <!--                            消息通知-->
                            <div class="go-a">
                                <span>
                                    <font-awesome-icon class="icon" :icon="['fas', 'envelope']"/>
                                    消息通知
                                </span>
                            </div>
                            <!--                            退出登录-->
                            <div class="go-a logout" @click="logout">
                                <span>
                                    <font-awesome-icon :icon="['fas', 'sign-out-alt']"/>
                                    退出
                                </span>
                            </div>
                        </div>
                        <el-avatar
                                slot="reference"
                                style="cursor: pointer"
                                size="large"
                                :src="avatar"/>
                    </el-popover>

                </div>
                <div class="login" v-else>
                    <el-button size="mini" @click="$router.push('/register')">注册</el-button>
                    <el-button size="mini" @click="goLoginPage" type="warning">登录</el-button>
                </div>
            </el-col>

        </el-row>


        <!--        内容创建-->
        <el-dialog
                class="info-dialog"
                title="你想创建以下什么内容呢?"
                :show-close="false"
                :visible.sync="createVisible"
                width="50%">
            <div class="info-box">
                <el-card class="box-card" style="background-color: #409EFF">
                    Mark
                </el-card>
                <el-card @click.native="$router.push('/make/moment')" class="box-card"
                         style="background-color: #E6A23C">
                    Share
                </el-card>
                <el-card class="box-card" style="background-color: #F56C6C">
                    待定
                </el-card>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {getItem} from "@/utils/storage"

    import {mapGetters} from 'vuex'

    export default {
        name: 'TopNav',
        data() {
            return {
                createVisible: false,
                activeIndex: "0",
                input: "",
                isSearch: false
            };
        },
        computed: {
            currentCity() {
                let item = getItem(this.$Constants.CURRENT_CITY);
                if (item) {
                    return item
                }
                return {
                    name: "全部城市"
                }
            },
            ...mapGetters([
                'avatar',
                'username',
                'account',
                'roles'
            ]),
        },
        methods: {
            /**
             * 退出登录
             */
            //退出登录
            async logout() {
                this.$confirm('确定注销并退出系统吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('LogOut').then(() => {
                        location.href = '/'
                    })
                })
            },
            /**
             * 前往登录页面，不过要先保存现在所浏览的页面，方便登录之后跳转回来
             */
            goLoginPage() {
                let continueUrl = window.location.href
                this.goNewPage(`/login?continue_url=${continueUrl}`)
            },
            /**
             * 获取焦点，开启搜索
             */
            searchFocus() {
                this.isSearch = true
            },
            /**
             * 失去焦点,关闭搜索，清空输入
             */
            searchBlur() {
                this.index = ""
                this.isSearch = false
            }
        },
        mounted() {
        },
        components: {}
    }
</script>

<style lang="less">
    .el-popover, .el-popper {
        .top-nav-content {

            .go-a:hover {
                background-color: #F2F6FC;
            }

            .logout {
                text-align: center;
                border-top: 1px solid #EBEEF5;
                margin-bottom: 0 !important;
            }

            .go-a {
                height: 40px;
                line-height: 40px;
                cursor: pointer;
                margin-bottom: 10px;
                color: #909399;

                .icon {
                    margin: 0 5px;
                }
            }

            .username {
                text-align: center;
            }

            .grade {
                margin: 5px 0 10px 0;
                border-bottom: 1px solid #EBEEF5;
                padding-bottom: 20px;

                > span {
                    color: #E6A23C;
                }
            }

        }

    }
</style>

<style scoped lang='less'>
    .top-nav {


        .logo {
            height: 60px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            > img {
                cursor: pointer;
                height: 60px;
                transform: scale(1.1);
            }

        }

        .avatar {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;

            /deep/ .el-popover__reference-wrapper {
                display: flex;

            }
        }

        .login {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 60px;

        }

        .search-box {
            position: relative;

            .search-content {
                position: absolute;
                width: 100%;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                position: absolute;
                padding: 10px;
                top: 52px;
                background-color: white;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
            }
        }

        .city {
            font-size: 12px;
            color: #909399;

            .select-city {
                color: #909399;
            }

            .select-city:hover {
                color: #E6A23C;
            }

            > span {
                margin-right: 5px;
            }
        }

        .info-dialog {

            .el-dialog__body {
                padding-top: 0;
                padding-bottom: 50px;
            }

            .info-box {
                display: flex;
                justify-content: space-around;
                align-items: center;

                .box-card {
                    cursor: pointer;
                    width: 30%;
                    color: #DCDFE6;
                }

                .box-card:hover {
                    transform: scale(1.2);
                }
            }
        }

    }
</style>
